<template>
  <div class="index">
    <header>
      <div class="filter-part">
        <div class="filter-item">
          <label>机构/医生：</label>
          <threeLevelLinkage v-model="docInfo" :onChange="onDocInfoChange"/>
        </div>
        <div class="filter-item">
          <label>处方号：</label>
          <i-input class="input" v-model.trim="filterObj.rxId" placeholder="请输入处方号"></i-input>
        </div>
        <div class="filter-item">
          <label>患者姓名：</label>
          <i-input class="input" v-model.trim="filterObj.name" placeholder="请输入患者姓名"></i-input>
        </div>
        <div class="filter-item">
          <label>审方医生：</label>
          <i-input class="input" v-model.trim="filterObj.pharmacyName" placeholder="请输入审方医生"></i-input>
        </div>
        <div class="filter-item">
          <label>日期：</label>
          <DatePicker
            type="date"
            :clearable="false"
            @on-change="changeStart"
            v-model="filterObj.fromTime"
            placeholder="开始日期"
            format="yyyy-MM-dd"
            style="width: 200px"
          ></DatePicker>
          <span style="margin-top: 5px;padding: 0 5px 0 5px">至</span>
          <DatePicker
            type="date"
            :clearable="false"
            @on-change="changeEnd"
            v-model="filterObj.endTime"
            placeholder="结束日期"
            format="yyyy-MM-dd"
            style="width: 200px"
          ></DatePicker>
        </div>
        <div class="filter-item">
          <label>处方状态：</label>
          <i-select class="select" v-model.trim="filterObj.searchStatus" :key="filterObj">
            <i-option :value="null">全部</i-option>
            <i-option value="1">审核中</i-option>
            <i-option value="2">已审核</i-option>
            <i-option value="3">已驳回</i-option>
          </i-select>
        </div>
        <div class="filter-btn-group">
          <i-button type="primary" @click="handleSearch">查询</i-button>
          <i-button @click="handleReset('forms')" icon="icon-gengxin">重置</i-button>
        </div>
      </div>
    </header>
    <!-- 列表 -->
    <div class="table">
      <Table
        size="small"
        :columns="columns"
        :data="data1"
        @on-selection-change="selectChange"
        :loading="loading"
        no-data-text="未查询到符合条件的记录"
        border
        stripe
      >
      </Table>
      <div class="page-wrapper">
        <div class="des">
          显示第{{filterObj.pageSize * (filterObj.pageNo - 1) + 1}}到第{{filterObj.pageSize * filterObj.pageNo}}条记录，总共{{count}}条记录 每页显示
          <i-select class="select" v-model="filterObj.pageSize" placeholder="请输入在用状态">
            <i-option :value="10">10</i-option>
            <i-option :value="20">20</i-option>
            <i-option :value="50">50</i-option>
          </i-select>条记录
        </div>
        <Page
          :total="count"
          :current="filterObj.pageNo"
          :page-size="filterObj.pageSize"
          @on-change="loadPage"
          class="pages"
        />
      </div>
    </div>
    <list-mask v-if="listcode" :dates="masklist" :imga="imga" :imgb="imgb" :status="status" @handledetelis="handledetelis" />
  </div>
</template>

<script>
const filterObj = {
  pageSize: 10,
  pageNo: 1,
  hospitalId: null,
  departmentId: null,
  doctorId: null,
  fromTime: null,
  endTime: null,
  rxId: null,
  name: null,
  pharmacyName: null,
  searchStatus: null
};
import api from "@/api/commonApi";
import Utils from "@/utils";
import ListMask from '@/pages/operation/components/chufang/listMask';
import threeLevelLinkage from "@/components/threeLevelLinkage";
export default {
  name: 'index',
  components: {
    ListMask,
    threeLevelLinkage
  },
  data() {
    return {
      filterObj: this.deepClone(filterObj),
      count: 0,
      status: null,
      loading: false,
      listcode: false,
      imga: '',
      imgb: '',
      masklist: {},
      docInfo: [],
      columns: [
        { type: "index", title: "排序", width: 60, align: "center" },
        { title: "处方号", key: "rxNumber", align: "center" },
        { title: "处方时间", key: "createtime", align: "center" },
        { title: "开方医院", key: "hospitalName", align: "center" },
        { title: "科室", key: "dept", align: "center" },
        { title: "开方医生", key: "operator", align: "center" },
        { title: "患者", key: "name", align: "center" },
        { title: "审核时间", key: "recordCheckTime", align: "center" },
        { title: "审方医生", key: "pharmacyName", align: "center" },
        {
          title: "审核结果",
          key: "status",
          align: "center",
          render: (h, params) => {
            let status = params.row.status;
            switch (parseInt(status)) {
              case 1:
                return '审核中';
              case 2:
                return '已审核';
              case 3:
                return '已驳回';
            }
          }
        },
        {
          title: "操作",
          key: "iOperate",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    margin: "0px 6px"
                  },
                  on: {
                    click: () => {
                      this.handleDetail(params);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ]
    }
  },
  created () {
    let breadList = [
      {path: "/index", title: "首页"},
      {
        path: "",
        title: "处方管理"
      },
      {
        path: "/index/operation/prescriptionmanage/prescrisearch/list",
        title: "药店处方查询"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    this.prescriptionSearchPage();
  },
  methods: {
    onDocInfoChange(vluse) {
      this.filterObj.hospitalId = parseInt(vluse.record.id)
      this.filterObj.departmentId = parseInt(vluse.record.departmentId)
      this.filterObj.doctorId = parseInt(vluse.record.doctorId)
    },
    handledetelis() {
      // 关闭弹框
      this.listcode = false
      this.imga = ''
      this.imgb = ''
    },
    handleSearch() {
      // 搜索
      this.filterObj.pageNo = 1;
      this.prescriptionSearchPage();
    },
    handleReset() {
      // 重置
      this.filterObj = this.deepClone(filterObj);
      this.docInfo = []
      this.prescriptionSearchPage();
    },
    loadPage(index) {
      // 分页
      this.filterObj.pageNo = index;
      this.prescriptionSearchPage();
    },
    prescriptionSearchPage() {
      let that = this
      const reqData = that.deepClone(this.filterObj);
      reqData.fromTime =  Utils.getNowDateBySpecialFormat(that.filterObj.fromTime);
      reqData.endTime =  Utils.getNowDateBySpecialFormat(that.filterObj.endTime);
      that.loading = true;
      that.$axios
        .post(api.prescriptionSearchPage, reqData)
        .then(res => {
          that.loading = false;
          if (res.data.code === 1) {
            let ret = res.data.object.list;
            that.count = res.data.object.count;
            that.data1 = ret;
          } else {
            that.$Message.error("请求异常");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleDetail(record) {
      let that = this
      let reqData = {
        rxId: record.row.rxId
      }
      this.$axios
        .post(api.prescriptionSearchDetail, reqData)
        .then(res => {
          if (res.data.code === 1) {
            that.masklist = res.data.object;
            let imageas = res.data.object.clinic.prescriptionSignature
            let imagebs = res.data.object.clinic.prescriptionReview
            if (imageas) { that.imga = that.fileBaseUrl + JSON.parse(imageas).fileName; }
            if (imagebs) { that.imgb = that.fileBaseUrl + JSON.parse(imagebs).fileName; }
            that.status = parseInt(record.row.status);
            setTimeout(() => { that.listcode = true; }, 350);
          } else {
            that.$Message.error("请求异常");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
      this.prescriptionSearchPage();
    }
  }
};
</script>

<style lang="less" scoped>
  .index{
    width: 98%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    header {
      width: 100%;
      .filter-part {
        display: flex;
        flex-wrap: wrap;
        .filter-item {
          display: flex;
          margin: 10px 10px 10px 0;
          label {
            white-space: nowrap;
            line-height: 32px;
            width: 84px;
            text-align: right;
          }
          .input {
            width: 220px;
          }
          .select {
            width: 120px;
          }
        }
        .filter-btn-group {
          margin: 10px 10px 10px 0;
          flex: 0 0 auto;
        }
      }
      .fun-part {
        margin-top: 15px;
        margin-bottom: 10px;
        a {
          vertical-align: bottom;
        }
      }
    }
    .table {
      .page-wrapper {
        display: flex;
        // margin-top: 20px;
        justify-content: space-between;
        .des {
          display: flex;
          align-items: center;
          .select {
            width: 50px;
          }
        }
        .pages {
        }
      }
    }
  }
  .drugmanagement-commondrug-list-MedicalModal {
    /deep/ .ivu-modal-wrap {
      label.ivu-form-item-label {
        padding-right: 0;
      }
      .ivu-modal-footer {
        display: none;
      }
      .btn-group {
        text-align: center;
        .save {
          width: 100px;
          margin-right: 20px;
        }
        .close {
          margin-left: 20px;
          width: 100px;
        }
      }
    }
  }
  .drugmanagement-commondrug-list-delModal {
    /deep/ .ivu-modal-wrap {
      .btn {
        width: 80px;
      }
    }
  }
</style>
